<template>
  <div class="MenuList">
    <div class="h">
      <div class="header">
        <h3>当前播放<span class="len">({{ musicStore.playList.length }})</span></h3>
        <div class="original"></div>
      </div>
      <div class="tabs">
        <div class="left">
          <SvgView ion="#icon-danquxunhuan" />
          <span>单曲循环</span>
        </div>
        <div class="right">
          <SvgView ion="#icon-iconfontzhizuobiaozhun023146" />
          <SvgView ion="#icon-shoucangjia" />
          <SvgView ion="#icon-shanchu" />
        </div>
      </div>
    </div>

    <div class="list">
      <div class="item" v-for="(item, i) in musicStore.playList" :key="musicStore.playList.id">
        <div class="item-left van-ellipsis" @click="changeMusic(i)" :class="i == musicStore.playIndx ? 'red' : ''">
          <SvgView v-if="i == musicStore.playIndx" ion='#icon-yinle1-copy' />
          {{ item.name }}<span :class="i == musicStore.playIndx ? 'red' : 'silver'"> - {{
              item.ar
                .reduce((a, b) => {
                  return (a += b.name + ",");
                }, "")
                .slice(0, -1)
          }}</span>
        </div>
        <div class="item-right">
          <SvgView ion='#icon-chacha' @click="delMusic(i)" />
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { useMusicStore } from '@/store/store';
import SvgView from '@/components/SvgView.vue';
const musicStore = useMusicStore()
const changeMusic = (i) => {
  musicStore.changePlayIndex(0, i);
  musicStore.changePlayReady(true)
}
const delMusic = (i) => {
  musicStore.playList.splice(i, 1)
  musicStore.changePlayList(musicStore.playList)
  if (i < musicStore.playIndx) {
    musicStore.changePlayIndex(-1);
  }
}
</script>

<style scoped lang="less">
.MenuList {
  background-color: white;
  position: relative;

  .h {
    position: sticky;
    top: 10px;
    height: 40px;

    .header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin: 0 10px;
      margin-top: 10px;

      h3 {
        span {
          color: silver;
          font-size: 10px;
          font-weight: normal;
        }
      }
    }

    .tabs {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin: 0 10px;
      margin-top: 5px;

      .left {
        display: flex;
        align-items: center;

        .icon {
          width: 20px;
          height: 20px;
        }

        span {
          font-size: 14px;
        }
      }

      .right {
        display: flex;

        .icon {
          width: 20px;
          height: 20px;
          margin: 0 10px;
        }
      }

    }
  }


  .list {
    margin-top: 20px;
    height: 320px;
    overflow: scroll;

    .item {
      display: flex;
      justify-content: space-between;
      padding: 10px;

      .item-left {
        display: flex;
        align-items: baseline;

        span {
          font-size: 10px;
        }

        .icon {
          width: 15px;
          height: 15px;
        }
      }

      .item-right {
        .icon {
          width: 15px;
          height: 15px;
          margin-right: 15px;
        }

      }
    }
  }
}

.red {
  color: red;
}
</style>